function getRandomColor() {
  const rgb = []
  for (let i = 0; i < 3; ++i) {
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length === 1 ? `0${color}` : color
    rgb.push(color)
  }
  return `#${rgb.join('')}`
}

Page({
  onShareAppMessage() {
    return {
      title: 'video',
      path: 'packageComponent/pages/media/video/video'
    }
  },

  onReady() {
    this.videoContext = wx.createVideoContext('myVideo')
  },

  onHide() {

  },

  inputValue: '',
  data: {
    theme: 'light',
    enableAutoRotation: true,
    enableDanmu: true,
    danmuBtn: true,
    showCastingButton: true,
    showScreenLockButton: true,
    showCenterPlayBtn: false,
    showPlayBtn: true,
    muted: true,
    showMuteBtn: true,
    controls: true,
    src: '',
    danmuList:
    [{
      text: '第 1s 出现的弹幕',
      color: '#ff0000',
      time: 1
    }, {
      text: '第 3s 出现的弹幕',
      color: '#ff00ff',
      time: 3
    }],
    // 新增属性
    autoplay: false,
    loop: false,
    initialTime: 0,
    pageGesture: false,
    direction: 0,
    showProgress: true,
    showFullscreenBtn: true,
    enableProgressGesture: true,
    objectFit: 'contain',
    poster: '',
    title: '',
    playBtnPosition: 'bottom',
    enablePlayGesture: false,
    autoPauseIfNavigate: true,
    autoPauseIfOpenNative: true,
    vslideGesture: false,
    vslideGestureInFullscreen: true,
    showBottomProgress: true,
    adUnitId: '',
    posterForCrawler: '',
    pictureInPictureMode: '',
    pictureInPictureShowProgress: false,
    pictureInPictureInitPosition: '',
    showSnapshotButton: false,
    showBackgroundPlaybackButton: true,
    backgroundPoster: '',
    referrerPolicy: 'no-referrer',
    isDrm: false,
    isLive: false,
    provisionUrl: '',
    certificateUrl: '',
    licenseUrl: '',
    preferredPeakBitRate: 0,
    duration: 0
  },

  bindInputBlur(e) {
    this.inputValue = e.detail.value
  },

  bindButtonTap() {
    const that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: ['front', 'back'],
      success(res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  },

  bindVideoEnterPictureInPicture() {
    console.log('进入小窗模式')
  },

  bindVideoLeavePictureInPicture() {
    console.log('退出小窗模式')
  },

  bindPlayVideo() {
    this.videoContext.play()
  },
  bindSendDanmu() {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  },

  videoErrorCallback(e) {
    console.log('视频错误信息:')
    console.log(e.detail.errMsg)
  },
  handleSwitchChange(e) {
    this.setData({
      enableAutoRotation: e.detail.value
    })
  },
  
  handlePropChange(e) {
    const { field } = e.currentTarget.dataset
    this.setData({       
      [field]: e.detail.value
    })
  },
  
  handleStringInput(e) {
    const { field } = e.currentTarget.dataset
    this.setData({
      [field]: e.detail.value
    })
  },
  
  handleNumberInput(e) {
    const { field } = e.currentTarget.dataset
    const value = parseFloat(e.detail.value) || 0
    this.setData({
      [field]: value
    })
  },
  
  handleSelectChange(e) {
    const { field } = e.currentTarget.dataset
    const index = e.detail.value
    
    // 根据不同的字段获取对应的选项数组
    let options = []
    switch(field) {
      case 'objectFit':
        options = ['contain', 'fill', 'cover']
        break
      case 'playBtnPosition':
        options = ['bottom', 'center']
        break
      case 'referrerPolicy':
        options = ['no-referrer', 'origin']
        break
    }
    
    // 获取对应的选项文本值
    const selectedValue = options[index] || ''
    
    this.setData({
      [field]: selectedValue
    })
  },
  
  // 视频事件处理函数
  bindPlay() {
    console.log('视频开始/继续播放')
  },
  
  bindPause() {
    console.log('视频暂停播放')
  },
  
  bindEnded() {
    console.log('视频播放结束')
  },
  
  bindTimeUpdate(e) {
  },
  
  bindFullscreenChange(e) {
    console.log('全屏状态变化:', e.detail.fullScreen, '方向:', e.detail.direction)
  },
  
  bindWaiting() {
    console.log('视频缓冲中')
  },
  
  bindProgress(e) {
    console.log('加载进度:', e.detail.buffered, '%')
  },
  
  bindLoadedMetadata(e) {
    console.log('视频元数据加载完成:', e.detail)
  },
  
  bindControlsToggle(e) {
    console.log('控制栏显示状态变化:', e.detail.show)
  },
  
  bindSeekComplete(e) {
    console.log('跳转完成:', e.detail)
  },
  
  bindCastingUserSelect(e) {
    console.log('用户选择投屏设备:', e.detail)
  },
  
  bindCastingStateChange(e) {
    console.log('投屏状态变化:', e.detail)
  },
  
  bindCastingInterrupt(e) {
    console.log('投屏被中断:', e.detail)
  },
  
  onLoad() {
    this.setData({
      theme: wx.getSystemInfoSync().theme || 'light'
    })

    if (wx.onThemeChange) {
      wx.onThemeChange(({theme}) => {
        this.setData({theme})
      })
    }
  }
})
